<form nz-form class="AppRepository">
    <nz-row>
        <h3>Link an new integration</h3>
    </nz-row>
    <nz-row>
        <nz-col [nzSpan]="8">
            <nz-form-item>
                <nz-form-label>Integration/Deployment</nz-form-label>
                <nz-form-control>
                    <nz-select nzShowSearch name="selectIntegration" [(ngModel)]="selectedIntegration" >
                        <nz-option *ngFor="let t of deploymentIntegrations" [nzLabel]="t.name" [nzValue]="t"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="13" class="configPadding">
            <ng-container *ngIf="selectedIntegration?.model">
                <h3>{{ 'integration_configuration' | translate }}</h3>
                <div *ngFor="let k of selectedIntegration.model.additional_default_config | keys">
                    <div class="six wide field">
                        <nz-form-item>
                            <nz-form-label [nzSpan]="6">
                                {{k}}
                                <i nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip nzTooltipPlacement="right" *ngIf="selectedIntegration.model.additional_default_config[k].description"
                                   [nzTooltipTitle]="selectedIntegration.model.additional_default_config[k].description"></i>
                            </nz-form-label>
                            <nz-form-control>
                                <input nz-input name="{{k}}-value" type="text" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
                                       *ngIf="selectedIntegration.model.additional_default_config[k].type === 'string'">
                                <input nz-input name="{{k}}-value" type="password" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
                                       *ngIf="selectedIntegration.model.additional_default_config[k].type === 'password'">
                                <textarea nz-input name="{{k}}-value" rows="3" [(ngModel)]="selectedIntegration.model.additional_default_config[k].value"
                                          *ngIf="selectedIntegration.model.additional_default_config[k].type === 'text'"></textarea>
                            </nz-form-control>
                        </nz-form-item>
                    </div>
                </div>
            </ng-container>
        </nz-col>
        <nz-col [nzSpan]="3" class="alignRight">
            <button nz-button nzType="primary" name="savebtn" [nzLoading]="loadingBtn" type="button" (click)="addIntegration()"
                    [disabled]="!selectedIntegration || loadingBtn">Add</button>
        </nz-col>
    </nz-row>
</form>
    <div class="fields">
        <div [hidden]="!application.deployment_strategies">
            <ng-container *ngIf="application.deployment_strategies">
                <h3>Linked integration</h3>
                <nz-table [nzData]="getIntegrationNames()" #integList>
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Configuration</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let pf of integList.data">
                        <td>
                            {{pf}}
                        </td>
                        <td>
                            <form nz-form>
                                <ng-container *ngFor="let k of application.deployment_strategies[pf] | keys">
                                    <nz-form-item>
                                        <nz-form-label [nzSpan]="6">
                                            {{k}}
                                            <i *ngIf="application.deployment_strategies[pf][k].description" nz-icon nzType="info-circle" nzTheme="outline" nz-tooltip
                                              [nzTooltipTitle]="application.deployment_strategies[pf][k].description"></i>
                                        </nz-form-label>
                                        <nz-form-control>
                                            <input nz-input type="text" name="{{k}}-value" [(ngModel)]="application.deployment_strategies[pf][k].value"
                                                   *ngIf="application.deployment_strategies[pf][k].type === 'string'">
                                            <input nz-input type="password" name="{{k}}-value" [(ngModel)]="application.deployment_strategies[pf][k].value"
                                                   *ngIf="application.deployment_strategies[pf][k].type === 'password'">
                                            <textarea nz-input name="{{k}}-value" rows="3" [(ngModel)]="application.deployment_strategies[pf][k].value"
                                                      *ngIf="application.deployment_strategies[pf][k].type === 'text'"></textarea>
                                        </nz-form-control>
                                    </nz-form-item>
                                </ng-container>
                            </form>
                        </td>
                        <td>
                            <div class="action alignRight">
                                <button nz-button nzType="primary" [disabled]="loadingBtn" [nzLoading]="loadingBtn"
                                        type="button" (click)="updateIntegration(pf)">Save</button>
                            </div>
                            <div class="alignRight">
                                <button nz-button nzDanger nzType="primary" [nzLoading]="loadingBtn"
                                    nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this integration ?"
                                    (nzOnConfirm)="clickDeleteIntegration(pf)">Delete</button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </ng-container>
        </div>
    </div>

